<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <title>Title</title>
        <script>
            function show(id,e){
                var taskId=setTimeout(function(){

                    var xmlHttpRequest=new XMLHttpRequest();


                    xmlHttpRequest.open("get","${pageContext.request.contextPath}/show?id="+id,true);

                    xmlHttpRequest.onreadystatechange=function(){
                        if(xmlHttpRequest.readyState==4){

                            document.getElementById("data").style.display="block";




                            var x=e.clientX;
                            var y=e.clientY;


                            document.getElementById("data").style.left=parseInt(x)+15+"px";
                            document.getElementById("data").style.top=parseInt(y)+10+"px";










                            var result=xmlHttpRequest.responseText;

                            var user=eval("("+result+")");

                            document.getElementById("id").innerHTML=user.id;
                            document.getElementById("username").innerHTML=user.username;
                            document.getElementById("password").innerHTML=user.password;
                            document.getElementById("phone").innerHTML=user.phone;
                            document.getElementById("address").innerHTML=user.address;


                        }
                    };

                    xmlHttpRequest.send(null);


                },800);

                this.onmouseout=function(){
                    clearTimeout(taskId);
                    out();
                };

            }


            function out(){
                document.getElementById("data").style.display="none";
            }
        </script>
    </head>
    <body>
        <c:forEach items="${users}" var="user">
            <li onmouseover="show(${user.id},event);" onmouseout="out();">${user.username}</li>
        </c:forEach>

        <hr/>

        <div id="data" style="background-color: #dddddd;width: 40%;padding: 8px;display: none;position: absolute;">
            编号：<span id="id"></span><br/>
            姓名：<span id="username"></span><br/>
            密码：<span id="password"></span><br/>
            电话：<span id="phone"></span><br/>
            地址：<span id="address"></span><br/>
        </div>
    </body>
</html>
